//主界面路由组件
import React, { Component } from 'react'
import { Switch, Route, Redirect } from 'react-router-dom'
import { connect } from 'react-redux'
import Cookies from 'js-cookie'//可以操作前端cookie的对象 set()/get()/remove()

import ZhurenInfo from '../zhuren-info/zhuren-info'
import CustomerInfo from '../customer-info/customer-info'
import Zhuren from '../zhuren/zhuren'
import Customer from '../customer/customer'
import Message from '../message/message'
import Personal from '../personal/personal'
import NotFound from '../../components/not-found/not-found'
import NavFooter from '../../components/nav-footer/nav-footer'
import Chat from '../chat/chat'

import { getRedirectTo } from '../../utils'
import { getUser } from '../../redux/actions'
import { NavBar } from 'antd-mobile';

class Main extends Component {

    //给组件对象添加属性
    navList = [//包含所有导航组件的相关信息数据
        {
            path: '/zhuren', //路 由 路 径
            component: Zhuren,
            title: '顾客列表',
            icon: 'customer',
            text: '顾客',
        },
        {
            path: '/customer', //路 由 路 径
            component: Customer,
            title: '主人列表',
            icon: 'zhuren',
            text: '主人',
        },
        {
            path: '/message', //路 由 路 径
            component: Message,
            title: '消息列表',
            icon: 'message',
            text: '消息',
        },
        {
            path: '/personal', //路 由 路 径
            component: Personal,
            title: '用户中心',
            icon: 'personal',
            text: '个人',
        }
    ]


    componentDidMount() {
        //1）登陆过（cookie中有userid）,但没有登录（redux管理的user中没有_id）,发请求获取对应的user，暂时不做任何显示
        const userid = Cookies.get('userid')
        const { _id } = this.props.user
        if (userid && !_id) {
            //发送异步请求获取user
            //console.log('发送Ajax请求获取user')
            this.props.getUser()
        }
    }

    render() {

        //读取cookie中的userid
        const userid = Cookies.get('userid')
        //如果没有，自动重定向到登录界面
        if (!userid) {
            return <Redirect to='/login' />
        }
        //如果有，读取redux中的user状态值
        const { user, unReadCount } = this.props
        //如果user没有_id，返回一个null（不做任何显示）
        if (!user._id) {
            return null
        } else {
            //如果有_id，就显示对应的界面
            //如果请求根路径，根据user的type和header来计算出一个重定向的路径，自动重定向
            let path = this.props.location.pathname
            if (path === '/') {
                //得到一个重定向路径
                path = getRedirectTo(user.type, user.header)
                return <Redirect to={path} />
            }
        }



        ////检查用户是否登录，如果没有自动重定向到登录
        // const {user} = this.props
        // if(!user._id){
        //     return <Redirect to='/login'/>
        // }

        const {navList} = this
        const path = this.props.location.pathname//请求的路径
        const currentNav = navList.find(nav => nav.path === path)//得到当前的nav，可能没有
        if(currentNav){
            //决定哪个路由需要隐藏
            if(user.type==='zhuren'){
                //隐藏数组的第二个
                navList[1].hide = true
            }else{
                //隐藏数组的第一个
                navList[0].hide = true
            }
        }

        return (
            <div>
                {currentNav ? <NavBar className='sticky-header'>{currentNav.title}</NavBar> : null}
                <Switch>
                    {
                        navList.map(nav => <Route path={nav.path} component={nav.component} />)
                    }
                    <Route path='/zhureninfo' component={ZhurenInfo} />
                    <Route path='/customerinfo' component={CustomerInfo} />    
                    <Route path='/chat/:userid' component={Chat} />                  
                    <Route component={NotFound} />

                </Switch>
                {currentNav ? <NavFooter navList={navList} unReadCount={unReadCount}/> : null}
            </div>
        )
    }
}
export default connect(
    state => ({ user: state.user,unReadCount:state.chat.unReadCount }),
    { getUser }
)(Main)
/*
1.实现自动登录
 1）登陆过（cookie中有userid）,但没有登录（redux管理的user中没有_id）,发请求获取对应的user
 在componentDidMount()，暂时不做任何显示
 在render()中
 2）如果cookie中没有userid,自动进入login页面
 3）判断redux管理的user中是否有_id，如果没有，暂时不做任何显示
 4）如果有，说明已经登录，显示对应的页面
2.如果已经登录了如果请求根路径
 根据user的type和header来计算出一个重定向的路径，自动重定向
*/